<template>
  <div>
    <div class="page-main">
       <el-tabs v-model="activeName" type="card">
    <el-tab-pane label="查询条件" name="query">
    
    </el-tab-pane>
    <el-tab-pane label="表头设置" name="table">
   
    </el-tab-pane>
    <el-tab-pane label="控制按钮" name="button">
  
    </el-tab-pane>
  </el-tabs>
  <div class="tab-content">
    <transition name="fade-transform" mode="out-in">
    <keep-alive>
    <query-condition
    v-if="activeName === 'query'"
    :menuId="id"
    :tableName=tableName>
      </query-condition>

       <table-header
         v-if="activeName === 'table'"></table-header>

        <control-button
          v-if="activeName === 'button'">

   </control-button>
    </keep-alive>
    </transition>
  </div>
    </div>
  </div>
</template>

<script>
import queryCondition from '../query-condition'
import tableHeader from '../table-header'
import controlButton from '../control-button'
export default {
  data() {
    return {
      tableName: '',
      activeName: 'query',
      id: ''
    }
  },
  components: {
    queryCondition,
    tableHeader,
    controlButton
  },
  mounted() {
    this.id = this.$route.params.id
    this.tableName = this.$route.params.tableName
  },

}
</script>

<style>

</style>